<template>
  <div class="component-detail">
    <NavTitle title="基本信息" showRightIcon />
    <div class="component-content component-title component-grid">
      <div class="component-info" v-for="(item, index) in componentList" :key="index">
        <div class="component-name ellipsis">{{ item.name }}</div>
        <div class="component-description ellipsis">{{ item.description }}</div>
      </div>
    </div>
    <NavTitle title="开发信息" showRightIcon />
    <div class="component-content component-title component-flex">
      <div class="component-info" v-for="(item, index) in developList" :key="index">
        <div class="component-name ellipsis">{{ item.name }}</div>
        <div class="component-description">
          <template v-if="item?.showIcon">
            <span v-if="showWord">{{ item.description }}</span>
            <span v-else>************************</span>
          </template>
          <template v-else>
            <span>{{ item.description }}</span>
          </template>
        </div>
        <div v-if="item?.showIcon" class="icon-container" @click="showWord = !showWord">
          <SvgIcon v-if="showWord" class="iconDef" :name="'eyes'" :color="'#1890ff'" width="16" height="16" />
          <SvgIcon v-else class="iconDef" :name="'eyesClose'" :color="'#1890ff'" width="16" height="16" />
        </div>
      </div>
    </div>
    <NavTitle title="人员信息" showRightIcon />

    <MemberMng
      :role-options="roleOptions"
      :object-id="curComponentCode"
      :object-type="ResourceType.component"
      :object-parent-id="componentData.applicationCode"
      :key="curComponentCode"
    />
    <div class="component-develop">
      <a-radio-group v-model:value="developValue" button-style="solid" size="large">
        <a-radio-button :value="item.uuid" v-for="(item, index) in allEnvironment" :key="index">{{
          item.name
        }}</a-radio-button>
      </a-radio-group>
    </div>
    <NavTitle title="流水线信息" showRightIcon class="nav-title-bottom" />
    <div class="component-content-bottom"><pipelineInformation :environmentUuid="developValue" /></div>
    <NavTitle title="部署单信息" showRightIcon class="nav-title-bottom" />
    <div class="component-content-bottom">
      <deploymentOrderInfo :environmentUuid="developValue" @emit-update-my-line-msg-list="emitUpdateMyLineMsgList" />
    </div>
    <NavTitle title="运维特征" showRightIcon class="nav-title-bottom" />
    <div class="component-content-bottom"><myLineFeature :environmentUuid="developValue" /></div>
    <NavTitle title="运维信息" showRightIcon class="nav-title-bottom" />
    <div class="component-content-bottom"><myLineMsg :environmentUuid="developValue" ref="myLineMsgRef" /></div>
  </div>
</template>

<script setup lang="ts">
import pipelineInformation from './tables/pipelineInformation.vue';
import deploymentOrderInfo from './tables/deploymentOrderInfo.vue';
import myLineFeature from './tables/myLineFeature.vue';
import myLineMsg from './tables/myLineMsg.vue';
import { getAllComponentData, getAllEnvironmentFun } from '@/api/applicationManagement';
import { TypeEnumCode } from '@/enums/commonEnum';
import { useApplicationStore } from '@/store/modules/app';
import { storeToRefs } from 'pinia';
import { rolesMap } from '@/settings/commonSettings';
import { ResourceType } from '@/enums/pipelineEnum';

const emits = defineEmits(['updateLoading']);
const counterStore = useApplicationStore();
const { componentData } = storeToRefs(counterStore);

const roleOptions = computed(() => Object.entries(rolesMap).map(([key, value]) => ({ value: key, label: value })));
const componentList = ref([
  {
    name: '组件名称',
    description: '',
    value: 'name',
  },
  {
    name: '组件编码',
    description: '',
    value: 'code',
  },

  {
    name: '组件类型',
    description: '',
    value: 'componentType',
  },
  {
    name: '编程语言',
    description: '',
    value: 'programLanguage',
  },
  {
    name: '创建人',
    description: '',
    value: 'creator',
  },
  {
    name: '创建时间',
    description: '',
    value: 'createTime',
  },
]);
const curComponentCode = computed(() => componentList.value.find((item) => item.value === 'code')?.description);
enum ComponeEnum {
  type = 'componentType',
}
const componentType: any = {
  1: TypeEnumCode.node,
  2: TypeEnumCode.java,
};

const getComponentEditData = async () => {
  await getAllComponentData(componentData.value.label).then((res: any) => {
    componentList.value = componentList.value.map((item: any) => {
      item.description = res?.[item?.value] || '';
      if (item.value == ComponeEnum.type) {
        item.description = componentType[res?.[item?.value]];
      }
      return item;
    });

    developList.value = developList.value.map((item: any) => {
      item.description = res?.[item?.value];
      return item;
    });
  });
  emits('updateLoading', false);
};

const developList = ref([
  {
    name: '代码仓库地址',
    description: '',
    value: 'codeRepository',
  },
  {
    name: 'git凭证token',
    description: '',
    showIcon: true,
    value: 'gitToken',
  },

  // {
  //   name: '基线分支',
  //   description: 'master',
  // },
]);

const showWord = ref(false);

const developValue = ref<any>('');
const allEnvironment = ref<any>([]);

const getAllEnvironment = async () => {
  await getAllEnvironmentFun({ applicationCode: componentData.value.applicationCode }).then((res: any) => {
    allEnvironment.value = res;
    developValue.value = res[0]?.uuid || '';
  });
};

// 测试提的-部署单操作之后需要刷新运维日志列表
const myLineMsgRef = ref<any>(null);
const emitUpdateMyLineMsgList = () => {
  myLineMsgRef.value.refreshTable();
};

watch(
  () => componentData,
  () => {
    developValue.value = '';
    componentData.value.label && getComponentEditData();
    componentData.value.applicationCode && getAllEnvironment();
  },
  {
    immediate: true,
  },
);
</script>

<style lang="less" scoped>
.component-detail {
  .component-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .component-flex {
    display: flex;
  }
  .component-title {
    border-top: 1px solid #ecf3fb;
    border-left: 1px solid #ecf3fb;
    border-radius: 4px;
  }
  .component-content {
    margin: 24px 0;

    .component-info {
      display: flex;
      width: 100%;
      align-items: center;
      height: 54px;
      border-bottom: 1px solid #ecf3fb;
      border-right: 1px solid #ecf3fb;
      position: relative;
      .component-name {
        // min-width: 120px;
        max-width: 180px;
        flex: 3;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 16px;
        background: #f9faf9;
        box-shadow: 1px 0px 0px 0px rgba(236, 243, 251, 1);
        border-radius: 4px 0px 0px 0px;
        font-size: 14px;
        color: #666666;
        font-weight: 400;
      }
      .component-description {
        flex: 7;
        // min-width: 240px;
        // max-width: 320px;
        overflow-x: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding: 0 16px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.8);
        letter-spacing: 0;
        font-weight: 400;
      }

      .icon-container {
        position: absolute;
        top: 50%;
        right: 24px;
        margin-left: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        transform: translate(0, -50%);
      }
    }
  }

  .component-content-bottom {
    margin-bottom: 24px;
  }

  .nav-title-bottom {
    margin-bottom: 16px;
  }

  .component-develop {
    margin: 24px 0;
  }

  :deep(.ant-radio-button-wrapper) {
    span {
      color: #2590ff;
    }
  }

  :deep(.ant-radio-button-wrapper-checked) {
    span {
      color: #fff !important;
    }
  }

  :deep(.ant-radio-button-wrapper:last-child) {
    border-radius: 0 4px 4px 0;
  }

  :deep(.ant-radio-button-wrapper:first-child) {
    border-radius: 4px 0 0 4px;
  }

  :deep(.ant-tag) {
    border-radius: 12px;
    min-width: 60px;
    min-height: 24px;
  }
}
</style>
